<template>
	<view class="container">
		<uni-nav-bar statusBar="true" :fixed="true" backgroundColor="transparent" :border="false" color="white" left-icon="left" @clickLeft="backTo"></uni-nav-bar>
		<image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/enterpriseCenter/bg.png" mode="scaleToFill" class="bg"></image>
		<view class="header">
			<image
				:src="institutionList[type].textImage ? 'https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/enterpriseCenter' + institutionList[type].textImage : null"
				mode="aspectFit"
				class="header-img"
			></image>
		</view>
		<view class="main">
			<view class="bar">
				<image src="@/static/enterpriseCenter/left.png" mode="aspectFit" class="bar-img"></image>
				<view class="bar-text">
					{{ institutionList[type].bar1 }}
				</view>
				<image src="@/static/enterpriseCenter/right.png" mode="aspectFit" class="bar-img"></image>
			</view>
			<view class="icon">
				<view class="icon-item" v-for="item in institutionList[type].iconText" :key="item.text">
					<image :src="item.icon ? 'https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/serviceCenter' + item.icon : null" mode="aspectFit" class="icon-img"></image>
					<view class="icon-text">{{ item.text }}</view>
				</view>
			</view>
			<!-- <view class="bar">
				<image src="@/static/enterpriseCenter/left.png" mode="aspectFit" class="bar-img"></image>
				<view class="bar-text">
					{{ institutionList[type].bar2 }}
				</view>
				<image src="@/static/enterpriseCenter/right.png" mode="aspectFit" class="bar-img"></image>
			</view>
			<view class="message">
				<view class="list">
					<view class="list-item">主体信息</view>
					<view class="list-item-2">></view>
					<view class="list-item">主体信息</view>
					<view class="list-item-2">></view>
					<view class="list-item">主体信息</view>
					<view class="list-item-2">></view>
					<view class="list-item">主体信息</view>
				</view>
				<view class="message-border"></view>
				<view class="message-text">注：以上流程仅供参考，请以页面提示为主</view>
			</view> -->
		</view>
		<view class="footerBase"></view>
		<view class="footer">
			<button open-type="share" class="member">
				<image src="@/static/enterpriseCenter/fenxiang.png" mode="aspectFit" class="img"></image>
				<view class="text">分享海报</view>
			</button>
			<view class="btn" @click="apply">{{ isEdit ? '修改申请' : isApplication ? '查看申请' : '立即申请' }}</view>
		</view>
		<uni-popup type="bottom" ref="registerRef">
			<view class="register-card">
				<view class="card-title">入驻注册</view>

				<view class="card-item">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="registerData.userName" placeholder="请输入姓名(必填)"></uni-easyinput>
				</view>
				<view class="card-item">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="registerData.mobile" placeholder="请输入手机号(必填)"></uni-easyinput>
				</view>
				<view class="card-item">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="registerData.code" placeholder="输入验证码">
						<template #right>
							<button
								:disabled="btnStatus != '发送验证码'"
								:style="{ color: btnStatus != '发送验证码' ? '#B0B0B0 !important' : 'var(--theme-color)' }"
								class="item-button"
								@click="codeList"
							>
								{{ btnStatus }}
							</button>
						</template>
					</uni-easyinput>
				</view>
				<view class="card-item" @click="changePosition">
					<uni-easyinput
						class="uni-mt-5"
						trim="all"
						:clearable="false"
						:styles="{ disableColor: '#fff' }"
						disabled
						v-model="valuePosition"
						placeholder="请选择定位"
						placeholderStyle="color: #9FA0A2"
					>
						<template #right>
							<view style="padding: 20rpx">
								<uni-icons type="right" size="20" color="#9FA0A2"></uni-icons>
							</view>
						</template>
					</uni-easyinput>
				</view>
				<view class="card-item">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="registerData.storeName" placeholder="请输入门店名称"></uni-easyinput>
				</view>
				<button class="register-submit" @click="handleSubmit">提交申请</button>
				<view class="register-agree box-flex">
					<image @click="agree = !agree" v-show="!agree" src="@/static/status-radio-unselected@2x.png"></image>
					<image @click="agree = !agree" v-show="agree" src="@/static/status-radio-selected@2x.png"></image>
					<p>
						阅读并同意
						<span @click="handleAgree">《服务协议》</span>
						<span @click="handlePrivacy">《隐私权政策》</span>
					</p>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="agreePopup" background-color="white">
			<view class="agree-popup">
				<view class="popup-main">
					<view class="popup-h2">温馨提示</view>
					<view class="main-info">
						为了更好的保障您的合法权益，请您阅读并同意牙荷以下协议
						<span @click="handleToAgreement('yonghu')">《用户协议》</span>
						<span @click="handleToAgreement('yinsi')">《隐私条款》</span>
					</view>
				</view>
				<view class="popup-footer">
					<button class="footer-button" @click="$refs.agreePopup.close()">不同意</button>
					<button
						class="footer-button"
						@click="
							agree = true;
							handleSubmit();
							$refs.agreePopup.close();
						"
					>
						同意并继续
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { institutionList } from './config';
import { fVailPhone } from '@/utils/Tools.js';

export default {
	data() {
		return {
			position: uni.getStorageSync('position'),
			institutionList: [],
			type: null,
			valuePosition: '',
			registerData: {
				storeAddress: '',
				latitude: '',
				longitude: '',
				code: ''
			},
			latitude: '',
			longitude: '',
			btnStatus: '发送验证码',
			time: 60,
			agree: false,
			isApplication: false,
			isEdit: false,
			editData: {}
		};
	},
	onLoad(options) {
		this.type = Number(options.type);
		this.isEdit = options.isEdit;
		this.institutionList = institutionList;
		if (this.position) {
			this.latitude = this.position.latitude;
			this.longitude = this.position.longitude;
		} else {
			uni.getLocation({
				type: 'wgs84',
				isHighAccuracy: true,
				success: (res) => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				}
			});
		}
		this.$post('/yahe/store/detail', { type: this.type }).then((res) => {
			if (res.success) {
				this.isApplication = res.content?.isApplication;
			} else {
				this.$toast(res.message, 'none');
			}
		});
		if (this.isEdit) {
			this.$refs.registerRef.open();
			this.$post('/yahe/store/detail', { type: this.type }).then((res) => {
				if (res.success) {
					this.editData = res.content;
					this.latitude = this.editData.latitude;
					this.longitude = this.editData.longitude;
					this.registerData = {
						latitude: this.editData.latitude,
						longitude: this.editData.longitude,
						userName: this.editData.userName,
						code: this.editData.code,
						mobile: this.editData.mobile,
						storeName: this.editData.storeName,
						storeAddress: this.editData.storeAddress
					};
					this.valuePosition = this.editData.storeAddress;
				} else {
					this.$toast(res.message, 'none');
				}
			});
		}
	},
	methods: {
		onShareAppMessage(res) {
			return {
				title: '牙荷',
				path: `/mineComponentPackage/serviceCentre/institution?type=${this.type}`,
				imageUrl: ''
			};
		},
		async handleSubmit() {
			let flag = false;
			for (const key in this.registerData) {
				console.log(this.registerData[key], 222);
				if (!this.registerData[key]) {
					this.$toast('请填写完整信息');
					flag = true;
					break;
				}
			}
			if (flag) {
				return;
			}
			if (!this.agree) {
				this.$refs.agreePopup.open();
				return;
			}
			uni.showLoading({
				title: '加载中...'
			});
			const param = {
				type: Number(this.type),
				...this.registerData
			};
			if (this.isEdit) {
				param.id = this.editData.id;
			}

			this.$post('/yahe/store/application', param, '1').then((res) => {
				if (res.success) {
					this.$toast('提交成功', 'success');
					this.$refs.registerRef.close();
					uni.navigateTo({
						url: `/mineComponentPackage/component/prompt?type=${this.type}`
					});
				} else {
					uni.hideLoading();
					this.$toast(res.message, 'none');
				}
			});
		},
		codeList() {
			const data = {
				recv: this.registerData.mobile,
				verifyValue: 111111
			};
			const phoneRes = fVailPhone(this.registerData.mobile);

			if (phoneRes && this.btnStatus == '发送验证码') {
				this.sendLoginCode(data);
			} else {
				this.$toast('手机号格式不正确', 'none');
			}
		},
		async sendLoginCode(data) {
			//  获取验证码
			clearInterval(timer);
			let timer;
			uni.showLoading({
				title: '加载中'
			});
			const res = await this.$post('/notification/codes/auth', data, '1');
			if (res.code == '1') {
				this.$toast('获取验证码成功', 'success');
				timer = setInterval(() => {
					if (this.time == 1) {
						this.btnStatus = '发送验证码';
						this.time = 60;
						clearInterval(timer);
						return;
					}
					this.btnStatus = `重新发送(${--this.time})`;
				}, 1000);
			} else {
				this.$toast(res.message, 'none');
			}
		},
		changePosition() {
			uni.chooseLocation({
				latitude: this.latitude, // 默认北京
				longitude: this.longitude,
				// keyword: '', // 搜索关键词
				success: (res) => {
					this.valuePosition = res.name;
					this.registerData.storeAddress = res.address;
					this.registerData.latitude = res.latitude;
					this.registerData.longitude = res.longitude;
				},
				fail: (err) => {
					// 必须添加失败回调
					if (err.errMsg.includes('auth deny')) {
						uni.showModal({
							content: '需要位置权限，请到设置页开启',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting();
								}
							}
						});
					}
				}
			});
		},
		backTo() {
			if (getCurrentPages().length > 1) {
				uni.navigateBack({
					delta: 1 // 返回上一页
				});
			} else {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		apply() {
			if (this.isEdit) {
				this.$refs.registerRef.open();
				this.$post('/yahe/store/detail', { type: this.type }).then((res) => {
					if (res.success) {
						this.editData = res.content;
						this.latitude = this.editData.latitude;
						this.longitude = this.editData.longitude;
						this.registerData = {
							latitude: this.editData.latitude,
							longitude: this.editData.longitude,
							userName: this.editData.userName,
							code: this.editData.code,
							mobile: this.editData.mobile,
							storeName: this.editData.storeName,
							storeAddress: this.editData.storeAddress
						};
						this.valuePosition = this.editData.storeAddress;
					} else {
						this.$toast(res.message, 'none');
					}
				});
			} else if (this.isApplication) {
				uni.navigateTo({
					url: `/mineComponentPackage/component/prompt?type=${this.type}`
				});
			} else {
				this.$refs.registerRef.open();
			}
		}
	}
};
</script>

<style scoped lang="less">
.container {
	background: #001718;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: scroll;
	.bg {
		width: 100%;
		height: 100%;
		// background: var(--theme-color);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.header {
		color: #fff;
		// position: relative;
		z-index: 10;
		margin: 20rpx 0 40rpx 0;
		width: 90%;
		text-align: center;
		.header-img {
			width: 474rpx;
			height: 188rpx;
		}
	}
	.main {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.card {
			width: 90%;
			height: 152rpx;
			background: #00675e;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
		.icon {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 90%;
			text-align: center;
			background: RGBA(0, 55, 51, 0.8);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 40rpx 0;
			.icon-item {
				width: 25%;
				margin: 20rpx 0;
				.icon-img {
					width: 112rpx;
					height: 112rpx;
				}
				.icon-text {
					font-weight: 400;
					font-size: 26rpx;
					color: #ffffff;
				}
			}
		}
		.bar {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 90%;
			margin-top: 20rpx;
			gap: 10rpx;
			.bar-img {
				width: 88rpx;
				height: 8rpx;
			}
			.bar-text {
				font-weight: bold;
				font-size: 34rpx;
				color: #f0d1a5;
			}
		}
		.message {
			display: flex;
			flex-direction: column;
			width: 90%;
			// height: 202rpx;
			background: #003733;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 40rpx 40rpx 20rpx 40rpx;
			box-sizing: border-box;
			margin-top: 40rpx;
			.list {
				display: flex;
				justify-content: space-between;
				padding-bottom: 40rpx;
				// margin: 40rpx 0;
				.list-item {
					// width: 180rpx;
					// height: 106rpx;
					// background: rgba(255,255,255,0.19);
					// border-radius: 8rpx 8rpx 8rpx 8rpx;
					display: flex;
					// flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 5rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #ffffff;
					// .list-item-title {
					// 	font-weight: 500;
					// 	font-size: 26rpx;
					// 	color: #FFFFFF;
					// }
					// .list-item-text {
					// 	font-weight: 400;
					// 	font-size: 20rpx;
					// 	color: rgba(255,255,255,0.4);
					// }
				}
				.list-item-2 {
					color: rgba(255, 255, 255, 0.5);
				}
			}
			.message-border {
				height: 0rpx;
				border-bottom: 2rpx solid #efefef;
				opacity: 0.08;
			}
			.message-text {
				font-weight: 400;
				font-size: 22rpx;
				color: rgba(255, 255, 255, 0.54);
				margin-top: 20rpx;
			}
		}
	}
	.footerBase {
		height: 230rpx;
	}
	.footer {
		width: 90%;
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 40rpx;
		color: white;
		.btn {
			width: 530rpx;
			height: 86rpx;
			background: #10beaf;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			text-align: center;
			line-height: 86rpx;
		}
		.member {
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 2;
			background: transparent;
			.img {
				width: 52rpx;
				height: 52rpx;
			}
			.text {
				font-weight: 400;
				font-size: 20rpx;
				color: #ffffff;
			}
		}
	}

	.register-card {
		background-color: white;
		padding: 40rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.register-submit {
			background: linear-gradient(90deg, var(--theme-color), #10beaf 100%);
			color: #fff;
			font-size: 30rpx;
			line-height: 88rpx;
			border-radius: 88rpx;
		}
		.register-agree {
			color: #b0b0b0;
			font-size: 24rpx;
			margin-top: 24rpx;
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			p {
				margin: 0;
				min-width: 0;
				flex: 1;
				line-height: 30rpx;
			}

			span {
				font-weight: bold;
				color: var(--theme-color);
			}
		}
		.card-title {
			text-align: left;
			font-weight: 500;
			font-size: 30rpx;
			color: #3a3a3a;
			margin-bottom: 20rpx;
		}
		::v-deep.is-disabled {
			color: #333;
		}
		.card-item {
			padding: 20rpx 0;
			line-height: 1;
			display: flex;
			align-items: center;
			font-size: 28rpx;

			// border-bottom: 2rpx solid #efefef;
			&:last-child {
				border: 0;
			}
			.item-label {
				color: var(--title-color);
				margin-right: auto;
			}
			.input {
				text-align: right;
			}

			.item-button {
				color: #0a978e;
				padding: 0 38rpx;
				border-radius: 16rpx;
				font-size: 25rpx;
				line-height: 84rpx;
				box-sizing: border-box;
				background: #fff;
			}
		}
	}
	.agree-popup {
		width: 80vw;
		background: #fff;
		border-radius: 20rpx;
		.popup-main {
			padding: 40rpx 48rpx;
			.main-info {
				font-size: 26rpx;
				color: #6d6d6d;
				letter-spacing: 1rpx;
				span {
					color: var(--theme-color);
				}
			}
		}
		.popup-h2 {
			font-size: 36rpx;
			color: var(--title-color);
			text-align: center;
			margin-bottom: 24rpx;
			font-weight: 500;
		}
		.popup-footer {
			display: flex;
			align-items: center;
			border-top: 1rpx solid var(--border-color);
			button {
				flex: 1;
				font-size: 30rpx;
				color: var(--title-color);
				line-height: 96rpx;
				font-weight: 500;
				&:last-child {
					color: var(--theme-color);
					border-left: 1px solid var(--border-color);
				}
			}
		}
	}
}
</style>
